<template>
    <div id="temp">
        <div class="cate">
            <ul>
                <li @click = "getimages(0)">全部</li>
                <li v-for="item in cates" @click = "getimages(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <div class="imglist">
            <!--<img style="width: 100%;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=959374280,2181051233&fm=173&s=673913C74960130FF53DD48D03006001&w=218&h=146&img.JPEG" alt="">-->
            <!--<img style="width: 100%;" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1373279787,2454741708&fm=173&s=4C02CF1833CB4EF588152CC90300E0BA&w=218&h=146&img.JPEG" alt="">-->
            <!--<img style="width: 100%;" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3152621676,3878201643&fm=173&s=CF3013C7C4E07DBF7FACCD7803002011&w=218&h=146&img.JPEG" alt="">-->
            <!--<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4000464015,198811832&fm=173&s=85F45A8656AA8555405079BB0300F013&w=600&h=1067&img.JPEG" alt="">-->
            <!--<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1103114798,2967392322&fm=173&s=E916619CE68314E20C9E54820300F098&w=558&h=319&img.JPEG" alt="">-->
            <ul>

                   <li v-for="item in list">
                       <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                           <img v-lazy="item.img_url">
                           <div class="desc">
                               <h5>{{item.title}}</h5>
                               <p>{{item.zhaiyao}}</p>
                           </div>
                       </router-link>
                   </li>


            </ul>
        </div>
    </div>
</template>
<script>
    import common from "../../kits/common.js";
    import {Toast} from "mint-ui";

    export default {
        data:function(){
            return {
                cates:[],
                list:[]
            }
        },
        created(){
            this.getcates();
            var all = 0;
            this.getimages(all)
        },
        methods:{
            getimages(catedid){
                var cateid = cateid ||0;
                var url = common.apidomain + '/api/getimages/'+ cateid;
                this.$http.get(url).then(function(res){
                    if(res.body.status !=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.list = res.body.message;
                })
            }
            ,
            getcates(){
                var url  = common.apidomain + '/api/getimgcategory';
                this.$http.get(url).then(function(res){
                    if(res.body.status !=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.cates = res.body.message;
                })
            }
        }

    }
</script>
<style scoped>
    .cate ul{
        padding-left:10px;
        margin:0;
        height:40px;
        white-space: nowrap;
        overflow-x: auto;
    }
    .cate li{
        list-style: none;
        display: inline-block;
        padding-left: 14px;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
    .imglist ul {
        padding:0;
    }
.imglist li {
        position: relative;
        list-style: none;
    }
    .imglist .desc{
        position: absolute;
        background:rgba(0,0,0,0.4);
        bottom:0;
        color:white;
    }
    .imglist h5{
        color:white;
    }
    .imglist img{
        width:100%;
    }
</style>